<!DOCTYPE html>
<html lang="en">
<head>
    {include file="common/meta" /}
</head>
<body>
    <div class="x-body">
        <!-- 为Echarts准备一个具备大小（宽高）的DOM元素 -->
        <!-- 按分类统计帖子 -->
        <div id="cate" style="width: 100%;height: 700px;"></div>
    </div>
</body>
</html>
<script src="/assets/admin/js/echarts.min.js"></script>
<script>
    // 获取数据
    var catelist=`{$catelist}`

    // 将json转为JS数组
    catelist=JSON.parse(catelist)

    // 已采纳
    var AcceptList=`{$AcceptList}`
    AcceptList=JSON.parse(AcceptList)

    // 未采纳
    var NotAcceptList=`{$NotAcceptList}`
    NotAcceptList=JSON.parse(NotAcceptList)

    // 基于准备好的DOM，初始化echarts实例
    var CateCharts=echarts.init(document.getElementById('cate'))

    // 指定图表的配置项和数据
    var option={
        // 标题
        title:{
            text:'按分类统计帖子',
            textAlign:'left'
        },

        // 提示框组件
        tooltip:{
            trigger:'axis',//触发类型
            axisPointer:{
                type:'shadow'//设置显示为阴影
            }
        },

        // 图例单元组件
        legend:{},

        // 设置网格
        grid:{
            left:'3%',
            right:'4%',
            bottom:'3%',
            containLabel:true,//自动设置坐标轴位置
        },

        // X轴
        xAxis:{
            type:'value',//数值轴
            boundaryGap:[0,0.01]
        },

        // Y轴
        yAxis:{
            type:'category',
            data:catelist
        },

        // 数据结构
        series:[
            {
                name:'未采纳',
                type:'bar',
                data:NotAcceptList
            },
            {
                name:'已采纳',
                type:'bar',
                data:AcceptList
            }
        ]

    }

    // 使用刚指定的配置项和数据显示图表
    CateCharts.setOption(option)
</script>